{% extends "base.html" %}

{% block additional_head %}
<style type="text/css">
div.vocab_list { background: #CCC; margin: 2em; padding: .5em; overflow: auto;} 
div.vocab_word { float: left; min-width: 25%;}
div.readings   { display:inline; font-size:0.75em; }
div.page_nav   { font-size: 0.8em; color: #933; text-align: right; float: right; }
div.page_nav a { color: #933; padding: 3px; }
div.page_nav a.curr_link { border: 1px solid #933; }
div.page_nav a:link, div.page_nav a:visited { text-decoration:none; }
div.page_nav a:hover, div.page_nav a:active { text-decoration:underline; }

div.vocab_word a { color: #600 }
div.vocab_word a:link, div.vocab_word a:visited { text-decoration:none; }
div.vocab_word a:hover, div.vocab_word a:active { text-decoration:underline; }

</style>
{% endblock %}

{% block content %}
<div class="page_title">Kanji Kyoushi Vocabulary</div>

<div class="page_nav">{% for page_link in page_links %}
<a {% ifequal page_link.0 bookmark %}class="curr_link"
    {% endifequal %}href="{{ page_link.1 }}">{{ page_link.0 }}</a>{% endfor %}</div>

<div class="vocab_list">
{% for vocab_word in vocab_list %}
    <div>
    <div class="vocab_word"><a href="vocab?word={{ vocab_word.word|escape }}">{{ vocab_word.word }}</a></div>
    <div class="readings">[{{ vocab_word.readings|join:", " }}]</div>
    </div>
{% endfor %}
</div>
{% endblock %}

